<template>
  <view class="setPsw">
    <topTitle :title="$t('editLoginPsw.title')" />
    <view class="ipt com">
      <view>
        <view>{{ $t('editLoginPsw.old_password') }}</view>
        <up-input 
          :placeholder="$t('editLoginPsw.placeholder_old_password')" 
          v-model="old_pass_word" 
          clearable 
          :password="eye" 
          class="item"
          border="none"
        >
          <template #suffix>
            <i @click="eye = !eye" :class="eye ? 'hideEye' : 'showEye'"></i>
          </template>
        </up-input>
      </view>
      <view>
        <view>{{ $t('editLoginPsw.new_password') }}</view>
        <up-input 
          :placeholder="$t('editLoginPsw.placeholder_new_password')" 
          v-model="pass_word" 
          clearable 
          :password="eye2" 
          class="item"
          border="none"
        >
          <template #suffix>
            <i @click="eye2 = !eye2" :class="eye2 ? 'hideEye' : 'showEye'"></i>
          </template>
        </up-input>
      </view>
      <view>
        <view>{{ $t('editLoginPsw.confirm_new_password') }}</view>
        <up-input 
          :placeholder="$t('editLoginPsw.placeholder_confirm_new_password')" 
          v-model="pass_word2" 
          clearable 
          :password="eye3" 
          class="item"
          border="none"
        >
          <template #suffix>
            <i @click="eye3 = !eye3" :class="eye3 ? 'hideEye' : 'showEye'"></i>
          </template>
        </up-input>
      </view>
    </view>
    <up-button class="btn" :text="$t('editLoginPsw.save')" @click="PaymentPwSetFn"></up-button>
  </view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
const instance = getCurrentInstance()?.appContext.config.globalProperties;
let eye = ref<boolean>(true)
let eye2 = ref<boolean>(true)
let eye3 = ref<boolean>(true)
import { PwUpdate, LogOut } from "@/api/UserApi";

let old_pass_word = ref<any>()
let pass_word = ref<string>()
let pass_word2 = ref<string>()
const PaymentPwSetFn = async () => {
  if (!old_pass_word.value) {
    uni.showToast({ title: instance?.$t('editLoginPsw.error_old_password'), icon: "none" });
    return
  }
  if (!pass_word.value) {
    uni.showToast({ title:  instance?.$t('editLoginPsw.error_new_password'), icon: "none" });
    return
  }
  if (!pass_word2.value) {
    uni.showToast({ title:  instance?.$t('editLoginPsw.error_confirm_password'), icon: "none" });
    return
  }

  if (pass_word.value != pass_word2.value) {
    uni.showToast({ title:  instance?.$t('editLoginPsw.error_password_mismatch'), icon: "none" });
    return;
  }
  await PwUpdate({
    pass_word: instance?.getRsaCode(old_pass_word.value),
    new_pass_word: instance?.getRsaCode(pass_word.value)
  })
  LogOut();
  instance?.goTo("/pages/notLoggedIn/index",  instance?.$t('editLoginPsw.success_password_update'));
}
</script>

<style scoped lang="scss">
@import "../../static/scss/setUp.scss";
</style>
